<style lang="less">
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .row-left{
    text-align: center;
  }
  .title-top{
    margin-bottom:10px;
    color: #1C86EE;
    font-size: 1rem;
    border-bottom: 1px solid orangered;
    font-size: 20px;
    color: coral;
  }
  .navi-title {
    height:30px;
    background-color:#f8f8f9;
    line-height:30px;
    padding-left: 15px;
    color: #5CACEE;
    font-size: 0.7rem;
    font-weight: bold;
  }
  .content1{
    background-color:white;
    height: auto;
    width: 100%;
    float: left;
    // border: 1px solid gray;
  }
  .idCard{
    width: 170px;
    height: 80px;
    background-color: #79e428;
    position: absolute;
    right: 2%;
    top: 13%;
    color: white;
    font-size: 1.5rem;
    line-height: 80px;
    text-align: center;
  }
  .red-name{
    color: red
  }
  .ivu-steps-item {
    display: initial;
    position: relative;
    vertical-align: initial;
  }
  .step-item {
    float: left;
    margin-left: 0px;
  }
</style>
<template>
  <div style="background-color:white;width:100%;height:auto">
    <div>
      <Row class="title-top">
        <Col span="4" style="text-align: left;width:22%">城市低保救助申请登记</Col>
      </Row>
    </div>
    <div style="height:30px;">
      <Steps :current="9" size="small">
        <div @click="nextStep('0')" class="step-item">
          <Step title="家庭信息" content=""></Step>
        </div>
        <div @click="nextStep('1')" class="step-item">
          <Step title="家庭成员" content=""></Step>
        </div>
        <div @click="nextStep('2')" class="step-item">
          <Step title="基础收入" content=""></Step>
        </div>
        <div @click="nextStep('3')" class="step-item">
          <Step title="基础支出" content=""></Step>
        </div>
        <div @click="nextStep('4')" class="step-item">
          <Step title="赡抚扶养" content=""></Step>
        </div>
        <div @click="nextStep('5')" class="step-item">
          <Step title="基础财产" content=""></Step>
        </div>
        <div @click="nextStep('6')" class="step-item">
          <Step title="财产房产" content=""></Step>
        </div>
        <div @click="nextStep('7')" class="step-item">
          <Step title="工作单位" content=""></Step>
        </div>
        <div @click="nextStep('8')" class="step-item">
          <Step title="教育情况" content=""></Step>
        </div>
        <div @click="nextStep('9')" class="step-item">
          <Step title="家庭附件" content=""></Step>
        </div>
        <div @click="nextStep('10')" class="step-item">
          <Step title="提交信息" content=""></Step>
        </div>
      </Steps>
    </div>
    <div class="content1">
      <div style="width:50%;float:left">
        <Table :columns="columns1" :data="data3" @on-row-click="clickRow">
          <template slot-scope="{ row }" slot="ssbh0003">
              <span v-if="row.necessary == false">{{ row.ssbh0003 }}</span>
              <span v-if="row.necessary == true" style="color: red">{{ row.ssbh0003 }}</span>
          </template>
        </Table>
        <Modal v-model="face_mol1" title="图片上传" :closable="false">
          <Upload multiple action="http://10.40.20.11:5000/api/uc/mzsc/uploadService/uploadPic" :before-upload="beforeUpload">
            <Button icon="ios-cloud-upload-outline">上传图片</Button>
            <span style="margin-left: 250px">请上传小于8M的图片</span>
          </Upload>
          <img :src="temp_photo" style="width: 100%"/>
          <div slot="footer">
            <Button type="success" :disabled="imgFlag == false" @click="changeToView()">确定</Button>
            <Button type="error" @click="face_mol1=false">关闭</Button>
          </div>
        </Modal>
        <!-- <Modal v-model="face_mol2" title="高拍仪" @on-visible-change="modalChange2" @on-cancel="closeHeight" @on-ok="closeHeight">
          <height-camera :isOpen="face_shows2" @ret-fun="retFun"></height-camera>
        </Modal> -->
      </div>
      <div style="width:50%;float:left">
        <Table :columns="columns2" :data="data4" @on-row-click="clickRow1">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="error" size="small" :disabled="order_state == '1' || order_state == '2' || order_state == '3'"  @click="deleteFile(index, row.configId)" style="margin-right:5px">删除</Button>
            <Button type="info" size="small"  @click="seeImg(row.filePath)" style="margin-right:5px">查看</Button>
          </template>
        </Table>
      </div>
    </div>
    <div style="height:40px;line-height:40px;float:left;width:100%;margin-top:10px;margin-left:40%">
      <Button type="info" :disabled="order_state == '1' || order_state == '2' || order_state == '3'" @click="next()" style="margin-right:5px">下一步></Button>
      <Button type="info" @click="nextPage()" v-if="order_state == '1' || order_state == '2' || order_state == '3'">下一页></Button>
    </div>
  </div>
</template>
<script>
import { getCityDBAttachmentConfigsk } from '@/api/subsistenceAlowances'
import { userinfo, date2str, iteminf, updateOrder, getUuid } from '@/api/eventlist'
// import HeightCamera from '_c/height2-camera'
import { getSign, createUpLoadFiles } from '@/api/common'
export default {
  components: {
    // HeightCamera
  },
  data () {
    return {
      query_attachment_url: '',
      family_url: '',
      support_id: '',
      family_idInfo: {},
      next_params: {},
      itemid: this.$route.params.itemid || '',
      attachment_url: '',
      info_url: '',
      add_url: '',
      update_url: '',
      delete_url: '',
      imgFlag: false,
      upPicData: {},
      personinfo: {}, // 办理人员信息
      today: '',
      see: this.$route.params.see || false,
      code: this.$route.params.code,
      fileKey: '',
      resInfo: {},
      fileType: '',
      filePath: '',
      fileTitle: '',
      paramuuid: '',
      // 图片要件预览临时变量
      temp_photo: '',
      // 图片上传弹出框
      face_mol1: false,
      // 高拍仪弹出框
      face_mol2: false,
      face_shows2: false,
      paramsData: {},
      paramsId: '',
      url: '',
      str: this.$route.params.serialNumber,
      idcardNumber: this.$route.params.idcardNumber,
      ss11001Id: this.$route.params.ss11001Id,
      ss11002Id: this.$route.params.ss11002Id,
      columns1: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '要件名称',
          slot: 'ssbh0003'
        },
        {
          title: '操作',
          key: 'cardno',
          render: (h, params, index) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.imgFlag = false
                    this.face_mol1 = true
                    this.temp_param_key = params.row.name
                    this.upPicData.fileName = params.row.ssbh0003 + this.datetime2str(new Date()) + '.jpg'
                    this.upPicData.userid = this.personinfo.id
                    this.upPicData.order_code = this.$route.params.code
                    this.upPicData.filePath = 'itemorder/' + this.personinfo.id + '/' + this.$route.params.code
                    this.temp_photo = ''
                    this.paramsData.configId = params.row.ssbh0005
                    this.paramObj.ss11010Id = this.$route.params.uuid
                    this.paramObj.ssbh0002 = params.row.ssbh0002
                    this.paramObj.ssbh0003 = params.row.ssbh0003
                    this.paramObj.ssbh0005 = params.row.ssbh0005
                    this.paramIndex = params.index
                  }
                }
              }, '上传要件')
            //   h('Button', {
            //     props: {
            //       type: 'primary',
            //       size: 'small'
            //     },
            //     on: {
            //       click: () => {
            //         this.face_mol2 = true
            //         this.face_shows2 = true
            //         // this.deletePeople(params.index)
            //       }
            //     }
            //   }, '拍摄')
            ])
          }
        }
      ],
      columns2: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '文件名称',
          key: 'title'
        },
        {
          title: '操作',
          slot: 'action'
          // render: (h, params) => {
          //   return h('div', [
          //     // h('Button', {
          //     //   props: {
          //     //     type: 'error',
          //     //     size: 'small'
          //     //   },
          //     //   style: {
          //     //     marginRight: '5px'
          //     //   },
          //     //   on: {
          //     //     click: () => {
          //     //       this.fileKey = params.row.fileKey
          //     //       this.deleteFile(params.index, params.row.configId)
          //     //     }
          //     //   }
          //     // }, '删除'),
          //     h('Button', {
          //       props: {
          //         type: 'primary',
          //         size: 'small'
          //       },
          //       style: {
          //         marginRight: '5px'
          //       },
          //       on: {
          //         click: () => {
          //           this.seeImg(params.row.filePath)
          //         }
          //       }
          //     }, '查看'),
          //     // h('Button', {
          //     //   props: {
          //     //     type: 'info',
          //     //     size: 'small'
          //     //   },
          //     //   on: {
          //     //     click: () => {
          //     //       this.downs(params.row.filePath)
          //     //     }
          //     //   }
          //     // }, '下载')
          //   ])
          // }
        }
      ],
      paramData: {
        configId: '',
        title: '',
        fileKey: '',
        fileType: '',
        Content: ''
      },
      paramObj: {
        fileData: []
      },
      ruleValidate: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ]
      },
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      dataF1: [],
      modal: false,
      form_params: {
        ss11001Data: {},
        ss11002Data: [],
        ss11003Data: [],
        ss11004Data: [],
        ss11005Data: [],
        ss11006Data: [],
        ss11007Data: [],
        ss11008Data: [],
        ss11009Data: [],
        ss11010Data: [],
        ss11012Data: [],
        ss12001Data: {}
      },
      receive_arr: [],
      id: '',
      paramIndex: '',
      ssbh0005: '',
      array: [],
      flag: 0,
      deleteFlag: 0,
      order_state: this.$route.params.order_state
    }
  },
  methods: {
    nextStep (step) {
      if (step === '0') {
        this.$router.push({
          name: 'db_subsistenceapplication',
          params: this.next_params
        })
      } else if (step === '1') {
        this.$router.push({
          name: 'db_subsistenceapplication1',
          params: this.next_params
        })
      } else if (step === '2') {
        this.$router.push({
          name: 'db_subsistenceapplication2',
          params: this.next_params
        })
      } else if (step === '3') {
        this.$router.push({
          name: 'db_expenditurelist',
          params: this.next_params
        })
      } else if (step === '5') {
        this.$router.push({
          name: 'db_basicproperty',
          params: this.next_params
        })
      } else if (step === '6') {
        this.$router.push({
          name: 'db_houseproperty',
          params: this.next_params
        })
      } else if (step === '7') {
        this.$router.push({
          name: 'db_workunit',
          params: this.next_params
        })
      } else if (step === '8') {
        this.$router.push({
          name: 'db_educationinfo',
          params: this.next_params
        })
      }
    },
    nextPage () {
      this.$router.push({
        name: 'db_submitinfo',
        params: this.next_params
      })
    },
    // 上传图片前转base64
    beforeUpload (file) {
      // this.upPicData.fileName = this.upPicData.fileName + '.' + file.type.substring(6)
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.file = reader.result.substring(index)
        that.paramsData.Content = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: this.timeStep
      }
      // if (param.fileName.length > 20) {
      //   param.fileName = param.fileName.substring(0, 20) + '.jpg'
      // }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: param.filePath, fileName: param.fileName, file: obj.file }).then(res => {
            if (res.data.errcode === 0) {
              this.paramsData.filePath = res.data.data
              this.paramsData.title = param.fileName
              this.paramsData.fileKey = getUuid()
              this.paramsData.fileType = 'jpg'
              this.temp_photo = res.data.data
              this.imgFlag = true
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '获取签名失败', desc: res.data.data.msg })
        }
      })
      // uploadPic(obj).then(res => {
      //   if (res.data.data.status === '1') {
      //     this.filePath = res.data.data.url
      //     this.fileTitle = res.data.data.img_name
      //     this.fileType = 'JPG'
      //     this.resInfo = res
      //     let imgurl = res.data.data.url
      //     this.paramuuid = this.uuid()

      //     this.paramsData.filePath = res.data.data.url
      //     this.paramsData.title = res.data.data.img_name
      //     this.paramsData.fileKey = getUuid()
      //     this.paramsData.fileType = 'jpg'
      //     this.temp_photo = imgurl
      //     this.imgFlag = true
      //   } else {
      //     this.imgFlag = false
      //     this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
      //   }
      // })
    },
    changeToView () {
      for (var i = 0; i < this.form_params.ss11010Data.length; i++) {
        if (this.ssbh0005 === this.form_params.ss11010Data[i].ssbh0005) {
          this.form_params.ss11010Data[i].fileData.push(JSON.parse(JSON.stringify(this.paramsData)))
        }
      }
      var param = {
        item_id: this.$route.params.itemid,
        cardno: this.$route.params.cardno,
        form_params: this.form_params,
        code: this.$route.params.code
      }
      // for (var j = 0; j < this.form_params.ss11010Data.length; j++) {
      //   if (this.form_params.ss11010Data[j].necessary === true && this.form_params.ss11010Data[j].fileData.length === 0) {
      //     break
      //   }
      // }
      updateOrder(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success(res.data.errmsg)
          this.paramsData = {}
          this.face_mol1 = false
          this.getAttachmentedList(this.ssbh0005)
        } else {
          const content = '<p>' + res.data.errmsg + '</p>'
          this.$Modal.error({
            title: this.errorTitle,
            content: content
          })
        }
      })
    },
    uploadPicSuccess (res, file) {
      if (res.state === 'SUCCESS') {
        this.filePath = res.url
        this.fileTitle = res.title
        if (res.type === '.jpg') {
          this.fileType = 'JPG'
        } else if (res.type === '.png') {
          this.fileType = 'PNG'
        } else if (res.type === 'jpeg') {
          this.fileType = 'JPEG'
        }
        this.resInfo = res
      } else {
        this.$Notice.error({ title: '', desc: res.msg })
      }
      // 调上传文件接口
      this.paramuuid = this.uuid()
    },
    modalChange2 (e) {
      this.openNow = e
    },
    retFun (data) {
      if (data.result) {
        this.face_mol2 = false
        this.filePath = data.result
        this.fileTitle = 'YAOJIAN'
        this.fileType = 'PNG'
        // 调上传文件接口
        this.paramuuid = this.uuid()
        this.changeToView()
      } else {
        alert('拍照失败,请重新拍摄')
      }
    },
    clickRow (row, index) {
      console.log(row, '#####')
      this.ssbh0005 = row.ssbh0005
      this.getAttachmentedList(row.ssbh0005)
    },
    clickRow1 (row, index) {
      // this.getAttachmentedList(row.ssbh0005)
    },
    // 查看图片
    seeImg (path) {
      console.log('aaaa')
      window.open(path)
    },
    // 下载图片
    downs (img) {
      // 必须同源才能下载
      var alink = document.createElement('a')
      alink.href = img
      alink.download = 'pic' // 图片名
      alink.click()
    },
    // 获取家庭需要上传的附件信息列表
    getAttachmentList () {
      var param = {
        'idcardNumber': this.idcardNumber,
        'serialNumber': this.str
      }
      getCityDBAttachmentConfigsk(param).then(res => {
        this.form_params.ss11010Data = []
        this.data3 = res.data.data.data.attachmentConfigs
        for (var j = 0; j < this.data3.length; j++) {
          this.data3[j].ssbh0005 = j.toString()
          var obj = {
            ss11010Id: this.$route.params.uuid,
            ssbh0002: this.data3[j].ssbh0002,
            ssbh0003: this.data3[j].ssbh0003,
            ssbh0005: this.data3[j].ssbh0005,
            necessary: this.data3[j].necessary,
            fileData: []
          }
          this.form_params.ss11010Data.push(obj)
        }
      })
    },
    // 获取已传附件信息
    getAttachmentedList (ssbh0005) {
      console.log(ssbh0005, '方法调用了')
      this.data4 = []
      for (var i = 0; i < this.form_params.ss11010Data.length; i++) {
        if (this.form_params.ss11010Data[i].ssbh0005 === ssbh0005) {
          var arr = this.form_params.ss11010Data[i].fileData
          for (var j = 0; j < arr.length; j++) {
            var obj = arr[j]
            this.data4.push(obj)
          }
        }
      }
      console.log(this.data4, '已传附件信息')
    },
    upfile (item1) {
      console.log('上传文件')
      // var obj = this.data3[item1]
    },
    // 删除文件
    deleteFile (index, ssbh0005) {
      console.log(index, ssbh0005, '!!!!')
      if (confirm('确定删除图片吗？')) {
        this.data4.splice(index, 1)
        console.log(this.data4, 'data4')
        for (var i = 0; i < this.form_params.ss11010Data.length; i++) {
          if (ssbh0005 === this.form_params.ss11010Data[i].ssbh0005) {
            console.log(ssbh0005, '相等')
            if (this.data4.length === 0) {
              this.form_params.ss11010Data[i].fileData = []
            } else {
              this.form_params.ss11010Data[i].fileData = this.data4
            }
            break
          }
        }
        var param = {
          item_id: this.$route.params.itemid,
          cardno: this.$route.params.cardno,
          form_params: this.form_params,
          code: this.$route.params.code
        }
        updateOrder(param).then(res => {
          if (res.data.errcode === 0) {
            this.$Message.success(res.data.errmsg)
            this.paramsData = {}
            this.face_mol1 = false
            this.getAttachmentedList(ssbh0005)
            this.modal = false
          } else {
            const content = '<p>' + res.data.errmsg + '</p>'
            this.$Modal.error({
              title: this.errorTitle,
              content: content
            })
          }
        })
      }
    },
    // 身份证号获取用户信息
    getuserinfo (cardno) {
      userinfo(cardno).then(res => {
        if (res.data.data) {
          this.personinfo = res.data.data
          this.personinfo.type = '身份证'
        } else {
          this.$Notice.error({ title: '查不到人员信息' })
        }
      })
    },
    next () {
      this.$router.push({
        name: 'db_submitinfo',
        params: this.next_params
      })
    },
    changePage () {
      // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
      // this.data3 = this.getHousePropertyList()
    },
    uuid () {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 32; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      // s[8] = s[13] = s[18] = s[23] = "-"
      var uuid = s.join('')
      return uuid
    },
    closeHeight () {
      console.log('guanbi')
      this.face_shows2 = false
    },
    // 时间转字符串 年月日时分秒
    datetime2str (date) {
      let time1 = date.getFullYear() + ''
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hh = date.getHours()
      let mm = date.getMinutes()
      let ss = date.getSeconds()
      time1 += month < 10 ? '0' + month : month
      time1 += day < 10 ? '0' + day : day
      time1 += hh < 10 ? '0' + hh : hh
      time1 += mm < 10 ? '0' + mm : mm
      time1 += ss < 10 ? '0' + ss : ss
      return time1
    }
  },
  mounted () {
    this.today = date2str(new Date()).replace(/-/g, '')
    this.getuserinfo(this.$route.params.idcardNumber)
    // 列表
    this.getAttachmentList()
    let param2 = {
      'cardno': this.$route.params.cardno,
      'id': this.$route.params.itemid,
      'code': this.$route.params.code,
      'params': '1'
    }
    // this.getuserinfo(param2.cardno)
    iteminf(param2).then(res => {
      if (res.data.data) {
        if (JSON.parse(res.data.data.form_params).ss11001Data) {
          this.form_params.ss11001Data = JSON.parse(res.data.data.form_params).ss11001Data
        }
        if ((JSON.parse(res.data.data.form_params)).ss11002Data) {
          this.form_params.ss11002Data = JSON.parse(res.data.data.form_params).ss11002Data
          this.dataF1[0] = JSON.parse(res.data.data.form_params).ss11002Data
        }
        if (JSON.parse(res.data.data.form_params).ss11003Data) {
          this.form_params.ss11003Data = JSON.parse(res.data.data.form_params).ss11003Data
        }
        if (JSON.parse(res.data.data.form_params).ss11004Data) {
          this.form_params.ss11004Data = JSON.parse(res.data.data.form_params).ss11004Data
        }
        if (JSON.parse(res.data.data.form_params).ss11005Data) {
          this.form_params.ss11005Data = JSON.parse(res.data.data.form_params).ss11005Data
        }
        if (JSON.parse(res.data.data.form_params).ss11006Data) {
          this.form_params.ss11006Data = JSON.parse(res.data.data.form_params).ss11006Data
        }
        if (JSON.parse(res.data.data.form_params).ss11007Data) {
          this.form_params.ss11007Data = JSON.parse(res.data.data.form_params).ss11007Data
        }
        if (JSON.parse(res.data.data.form_params).ss11008Data) {
          this.form_params.ss11008Data = JSON.parse(res.data.data.form_params).ss11008Data
        }
        if (JSON.parse(res.data.data.form_params).ss11009Data) {
          this.form_params.ss11009Data = JSON.parse(res.data.data.form_params).ss11009Data
        }
        console.log(JSON.parse(res.data.data.form_params).ss11010Data, 'ss11010Data')
        if (JSON.parse(res.data.data.form_params).ss11010Data.length === 0) {
          this.form_params.ss11010Data = this.form_params.ss11010Data
        } else {
          this.form_params.ss11010Data = JSON.parse(res.data.data.form_params).ss11010Data
        }
        if (JSON.parse(res.data.data.form_params).ss11012Data) {
          this.form_params.ss11012Data = JSON.parse(res.data.data.form_params).ss11012Data
        }
        if (JSON.parse(res.data.data.form_params).ss12001Data) {
          this.form_params.ss12001Data = JSON.parse(res.data.data.form_params).ss12001Data
        }
      }
    })
    this.next_params = {
      serialNumber: this.$route.params.serialNumber,
      idcardNumber: this.$route.params.idcardNumber,
      code: this.$route.params.code,
      cardno: this.$route.params.cardno,
      itemid: this.itemid,
      order_state: this.order_state,
      uuid: this.$route.params.uuid
    }
  }
}
</script>
